<template>
  <div class="container">
    <input type="text" v-model="message" />
    <button
      type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      Copy!
    </button>
    <button type="button" @click="doCopy">Copy!</button>
  </div>
</template>

<script>
export default {
  name: "CopyDemo",
  components: {},
  props: {},
  data() {
    return {
      message: "Copy These Text",
    };
  },
  watch: {},
  computed: {},
  methods: {
    onCopy: function (e) {
      alert("You just copied: " + e.text);
    },
    onError: function (e) {
      alert("Failed to copy texts");
    },
    doCopy: function () {
      this.$copyText(this.message).then(
        function (e) {
          alert("Copied: " + e.text);
          console.log(e);
        },
        function (e) {
          alert("Can not copy");
          console.log(e);
        }
      );
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.wrapper {
}
</style>
